<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 600px;
      height: 600px;
      background-color: pink;
      color: #ffffff;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <div></div>

  <script>
    /*
    节流：单位时间内，频繁的触发事件，只执行一次
    语法：_.throttle(func, [wait=0], [options=]) 
    创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。 
    该函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。
     可以提供一个 options 对象决定如何调用 func 方法， options.leading 与|或 options.trailing 决定 wait 前后如何触发。 
     func 会传入最后一次传入的参数给这个函数。 随后调用的函数返回是最后一次 func 调用的结果。
     */

    /* 节流函数 */
    function throttle(fn, time) {
      let timer = null
      return function () {
          if(!timer){
            timer=setTimeout(()=>{
              fn()
              timer=null
            },time)
          }
      }
    }

    let i = 1
    let div = document.querySelector("div")
    function mouseMove() {
      div.innerHTML = i++
    }
    div.addEventListener("mousemove", throttle(mouseMove, 1000))
  </script>
</body>

</html>